<template>
  <view class="viewport">
    <!-- 顶部背景 -->
    <view class="navbar" :style="{ paddingTop: safeArea.top + 'px' }">
      <view class="back icon-left" @click="goBack"></view>
      <view class="title">个人信息</view>
    </view>
    <scroll-view scroll-y>
      <!-- 头像 -->
      <view class="avatar" @tap="changeAvatar">
        <image :src="memberProfile.avatar" mode="aspectFill" />
        <text>点击修改头像</text>
      </view>
      <view class="form">
        <view class="form-item">
          <text class="label">账号</text>
          <!-- 账号名不能修改，用 text 组件展示 -->
          <text>{{ memberProfile.account }}</text>
        </view>
        <view class="form-item">
          <text class="label">昵称</text>
          <!-- 输入框通过 v-model 双向绑定修改数据 -->
          <input v-model="memberProfile.nickname" />
        </view>
        <view class="form-item">
          <text class="label">性别</text>
          <radio-group @change="genderChange">
            <label class="radio">
              <radio
                value="男"
                color="#27ba9b"
                :checked="memberProfile.gender === '男'"
              />
              男
            </label>
            <label class="radio">
              <radio
                value="女"
                color="#27ba9b"
                :checked="memberProfile.gender === '女'"
              />
              女
            </label>
          </radio-group>
        </view>
        <view class="form-item">
          <text class="label">出生日期</text>
          <picker
            @change="handleBirthdayChange"
            mode="date"
            start="1900-01-01"
            :end="endTime"
          >
            <view>{{ memberProfile.birthday || "请选择日期" }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">城市</text>
          <picker @change="handleFullLocationChange" mode="region">
            <view>{{ memberProfile.fullLocation || "请选择城市" }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">职业</text>
          <!-- 输入框通过 v-model 双向绑定修改数据 -->
          <input v-model="memberProfile.profession" placeholder="请填写职业" />
        </view>
        <!-- 提交按钮 -->
        <view class="button" @click="handleSubmitForm">保 存</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import Schema from "validate";
const userValidate = new Schema(
  {
    // 昵称
    nickname: {
      type: String, //校验类型
      required: true, //必填
      match: /^[\u4e00-\u9fa5]+$/, //校验规则中文字符
      message: "昵称需要为中文", //提示信息
    },
    // 性别
    gender: {
      type: String, //校验类型
      required: true, //必填
      message: "性别不能为空", //提示信息
    },
    // 生日
    birthday: {
      type: String, //校验类型
      required: true, //必填
      message: "生日不能为空", //提示信息
    },
    // 职业
    profession: {
      type: String, //校验类型
      required: true, //必填
      match: /^[\u4e00-\u9fa5]+$/, //校验规则中文字符
      message: "职业不能为空", //提示信息
    },
    //省份编码
    provinceCode: {
      type: String, //校验类型
      required: true, //必填
      message: "城市不能为空", //提示信息
    },
    //城市编码
    cityCode: {
      type: String, //校验类型
      required: true, //必填
      message: "城市不能为空", //提示信息
    },
    //区编码
    countyCode: {
      type: String, //校验类型
      required: true, //必填
      message: "城市不能为空", //提示信息
    },
  },
  // 第二个对象是配置对象,配置严格模式的
  //加上严格模式,防止未校验数据被剥离 关闭严格模式
  { strict: false }
);
import {
  getMemberProfile,
  postMemberProfileAvatar,
  putMemberProfile,
} from "@/api/profile";
import { mapState,mapMutations } from "vuex";
import dayjs from "dayjs";
export default {
  data() {
    return {
      //用户数据
      memberProfile: null,
    };
  },
  //onLoad生命周期改为onShow页面只要显示就会发请求image.png
  onShow() {
    // 调用获取个人信息数据函数
    this.getMemberProfile();
  },
  computed: {
    ...mapState(["safeArea"]),
    // 拿一下vuex的用户数据
    ...mapState('user',["userInfo"]),
    //出生日期最后日期为当前日期
    endTime() {
      // 格式YYYY-MM-DD
      // 1.js方式实现日期处理
      // const date = new Date();
      // const year = date.getFullYear(); //年
      // let month = date.getMonth() + 1; //月 0-11 所以要加1
      // month = month < 10 ? "0" + month : month;
      // let day = date.getDate(); //日
      // day = day < 10 ? "0" + day : day;
      // console.log(`${year}-${month}-${day}`); //默认返回没有补0操作，需要手动补
      // return `${year}-${month}-${day}`;
      // 2.使用插件dayjs实现日期格式化
      return dayjs().format("YYYY-MM-DD");
      // console.log(dayjs().format('YYYY-MM-DD'));
    },
  },
  methods: {
    ...mapMutations('user',["setUserInfo"]),
    //获取个人信息数据
    async getMemberProfile() {
      const res = await getMemberProfile();
      console.log("res  ----->  ", res);
      // 把获取到的用户数据设置给data中的memberProfile变量
      this.memberProfile = res.result;
    },
    //修改用户头像
    // 1.使用内置的api（uni.chooseMedia）选择本地图片 获取到临时地址
    // 2.发送图片给接口 获取到在线地址
    async changeAvatar() {
      // uni使用await返回数组
      const [, res1] = await uni.chooseMedia({
        count: 1, //图片数量限制
        mediaType: ["image"], //文件类型设置
      });
      console.log("res1  ----->  ", res1);

      this.imageFileUrl = res1.tempFiles[0].tempFilePath;
      //console.clear() //清空之前的Log
      // console.log('  this.imageFileUrl----->  ', this.imageFileUrl);
      // 因为uploadFile没处理返回值所以还是数组,只有request处理了返回值不是数组
      const [, res2] = await postMemberProfileAvatar(this.imageFileUrl);
      console.log("res2  ----->  ", res2);
      //把返回的json数据转为对象
      const data = JSON.parse(res2.data);
      console.log("data  ----->  ", data);
      this.memberProfile.avatar = data.result.avatar; //实时更新用户头像
    },
    //处理性别切换
    genderChange(ev) {
      // console.log('ev  ----->  ', ev);
      this.memberProfile.gender = ev.detail.value; //把获取到的值赋值给memberProfile对象的gender属性
    },
    //处理出生日期
    handleBirthdayChange(ev) {
      // console.log('ev  ----->  ', ev);
      this.memberProfile.birthday = ev.detail.value;
    },
    //处理省市区选择
    handleFullLocationChange(ev) {
      console.log("ev  ----->  ", ev);
      // join('')方法将数组元素以特定符号连接成字符串 join()代表逗号连接 join(')代表连接 join('-')代表斜杠链接
      this.memberProfile.fullLocation = ev.detail.value.join("");
      //设置后台需要的省市区编码
      // 省的编码
      this.memberProfile.provinceCode = ev.detail.code[0];
      // 市的编码
      this.memberProfile.cityCode = ev.detail.code[1];
      //区的编码
      this.memberProfile.countyCode = ev.detail.code[2];

      console.log("  this.memberProfile ----->  ", this.memberProfile);
    },
    // 提交修改逻辑
    // 1.收集数据
    // 2.使用validate进行一个表单校验
    // 3.校验通过，发请求
    // 4.修改vuex中的头像和昵称
    // 5.提示用户 修改成功
    // 6.延迟一会返回上一页
    //提交数据,完成信息修改
    async handleSubmitForm() {
      //解构出接口需要的数据
      const {
        birthday,
        cityCode,
        countyCode,
        gender,
        nickname,
        profession,
        provinceCode,
      } = this.memberProfile;
      //收集数据
      const params = {
        birthday,
        cityCode,
        countyCode,
        gender,
        nickname,
        profession,
        provinceCode,
      };
      //进行表单校验
      // console.log('params  ----->  ', params);
      const errors = userValidate.validate(params);
      // console.log('errors  ----->  ', errors);
      // 如果数组有长度代表有错误,提示用户并退出函数,下面请求不再执行
      if (errors.length) {
        return uni.showToast({
          title: errors[0].message,
          icon: "error",
        });
      }
      //校验通过发送请求
      // console.log(' params1 ----->  ',params );
    await putMemberProfile(params);

    //修改vuex中的头像和昵称
    // const  userInfo =   this.userInfo  不能这样写，是对象引用，修改其一另一个改变,不符合vuex通过mutaions和actions修改状态思想
    // 需要拷贝对象
    const userInfo  = {...this.userInfo}
    userInfo.avatar = this.memberProfile.avatar
    userInfo.nickname = this.memberProfile.nickname
  
  // 通过mutaions修改vuex中的头像和昵称
    this.setUserInfo(userInfo);

    // 提示用户
    uni.showToast({
      title:'修改成功'
    })
    //延迟返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 1500);
    },
  },
};
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}
.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-image: url(https://static.botue.com/erabbit/static/images/order_bg.png);
  background-size: auto 392rpx;
  background-repeat: no-repeat;
}
.navbar {
  .title {
    height: 40px;
    line-height: 32px;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
  }
  .back {
    position: absolute;
    left: 20rpx;
    top: 22px;
    font-size: 23px;
    z-index: 9;
    color: #fff;
  }
}
.avatar {
  text-align: center;
  padding: 20rpx 0 40rpx;
  image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
  }
  text {
    display: block;
    padding-top: 20rpx;
    line-height: 1;
    font-size: 26rpx;
    color: #fff;
  }
}
.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  .form-item {
    display: flex;
    height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    &:last-child {
      border: none;
    }
    .label {
      width: 180rpx;
      color: #333;
    }
    input {
      flex: 1;
      display: block;
      height: 46rpx;
    }
    .radio {
      display: inline-block;
      height: 46rpx;
      margin-right: 20rpx;
      vertical-align: middle;
    }
    radio {
      transform: scale(0.7) translateY(-2px);
    }
    picker {
      flex: 1;
    }
  }
}
.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
